<template>
	<template v-for="(item, index) in menuData" :key="index">
		<template v-if="item.visible == '0' && item.menuType == 'M'">
			<el-sub-menu :index="String(item.path)">
				<template #title>
					<el-icon><GobletFull /></el-icon>
					<span>{{ item.menuName }}</span>
				</template>
				<recursion :menu-data="item.children" />
			</el-sub-menu>
		</template>
		<template v-else-if="item.visible == '0' && item.menuType == 'C'">
			<el-menu-item :index="String(item.path)">
				<template #title>
					<el-icon><Apple /></el-icon>
					<span>{{ item.menuName }}</span>
				</template>
			</el-menu-item>
		</template>
	</template>
</template>

<script setup>
	import { Apple, GobletFull } from '@element-plus/icons-vue';
	defineProps(['menuData']);
	
</script>

<style scoped lang="scss">
.el-sub-menu:nth-of-type(1) {
    background-color: blueviolet;
}
</style>


